<template>
  <div style="width: 100%; height: 100vh;">
    <van-nav-bar title="我的医生" left-text="" left-arrow @click-left="onClickLeft" />
    <van-tabs>
      <!-- v-if -->
      <div>

      </div>
      <!-- v-else -->
      <div>
        <van-tab title="服务过我的医生">
          <van-empty description="暂无“服务过我的医生”" />
          <h4 class="tab1H4"><span>30W+</span>注册医生，<span>2W+</span>名医专家</h4>
          <p class="tab1P">报道即可绑定医生，医生可提供门诊预约、在线咨询、开方续方、健康随访和科普健康知识服务</p>
          <button class="tab1Btn" @click="$router.push({path:'/more'})">去报道医生</button>
        </van-tab>
      </div>
      <van-tab title="我关注的医生">
        <div v-if="interestList.length == 0">
          <van-empty description="暂无“我关注的医生”" />
          <button class="tab2Btn">去关注医生</button>
        </div>
        <div v-else class="else">
          <div class="listbottom">
            <!-- @click="toDetail(item.id)" -->
            <div v-for="(item, index) in interestList" :key="index" class="listitem">
              <div class="left">
                <img :src="item.avatar" alt="" />
              </div>
              <div class="right">
                <!-- 名字 -->
                <h2 class="name">
                  {{ item.name }}
                  <span class="director">{{ item.position }}</span>
                  <button class="third" v-if="item.optimum === true">三甲</button>
                </h2>
                <!-- 医院 -->
                <div class="hospital">{{ item.hospital }} &ensp; {{ item.class }}</div>
                <!-- 咨询 -->
                <div class="consult">
                  <div class="blue">图文咨询</div>
                  <div class="green">电话咨询</div>
                  <div class="cyan">视频咨询</div>
                </div>
                <!-- 擅长 -->
                <div class="excel">
                  <div class="van-multi-ellipsis--l2">
                    擅长: {{ item.strong }}
                  </div>
                </div>
                <!-- 好评 -->
                <div class="like">
                  <span>好评率&ensp;<span class="color">{{ item.praise }}%</span></span>
                  <span class="separate">|</span>
                  <span>锦旗&ensp;<span class="color">3</span> </span>
                  <span class="separate">|</span>
                  <span>浏览人次&ensp;<span class="color">{{ item.browse }}</span>
                  </span>
                </div>
                <!-- 问医生 -->
                <div class="ask">
                  <span class="price">¥ <span class="num">{{ item.person }}</span> <span
                      style="color: #cacaca; font-weight: 400;">起</span></span>
                  <button class="btn">问医生</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import http from '../../../http/http';
const onClickLeft = () => history.back();

const interestList = ref([]);

const getInterestList = async () => {
  await http.get(`/myDoctor`).then(res => {
    interestList.value = res.data.data
    console.log('====================================');
    console.log(interestList.value);
    console.log('====================================');
  })
}

onMounted(() => {
  getInterestList();
})
</script>
<style scoped lang="scss">
.tab1H4 {
  text-align: center;
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 30px;
  margin-top: 40px;
}

.tab1H4>span {
  color: #FF5A00;
}

.tab1P {
  width: 90%;
  margin-left: 5%;
}

.tab1Btn {
  width: 90%;
  height: 100px;
  background-color: #0070FF;
  color: #fff;
  border-radius: 20px;
  border: none;
  margin-top: 40px;
  margin-left: 5%;
  font-size: 30px;
}

.tab2Btn {
  width: 90%;
  height: 100px;
  margin-left: 5%;
  background-color: #0070FF;
  border: none;
  border-radius: 20px;
  color: #fff;
  margin-top: 140px;
  font-size: 30px;
}

.else {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #f1f1f1;
}

.listbottom {
  width: 100%;
  overflow: auto;
  margin-top: 25px;
  padding-top: 10px;
  background-color: #f1f1f1;

  .listitem {
    width: 100%;
    height: 400px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f6f6f8;
    background-color: #fff;
    border-radius: 10px;

    .left {
      width: 20%;
      height: 100%;
      float: left;
      padding-left: 20px;

      img {
        width: 120px;
        height: 120px;
        border-radius: 60px;
      }
    }

    .right {
      width: 80%;
      height: 100%;
      float: right;
      padding-left: 10px;
      padding-right: 10px;

      .name {
        font-size: 40px;
        // text-indent: 20px;
        width: 100%;
        height: 60px;
        line-height: 60px;

        .director {
          font-size: 30px;
          font-weight: 400;
          margin: 0 10px;
        }

        .third {
          font-size: 23px;
          background-color: #00ba82;
          font-weight: 400;
          border-radius: 10px;
          width: 70px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          color: #fff;
          border: 0;
        }
      }

      .hospital {
        font-size: 30px;
        margin-bottom: 10px;
      }

      .consult {
        display: flex;
        justify-self: flex-start;
        font-size: 25px;

        div {
          width: 140px;
          height: 45px;
          margin-right: 15px;
          padding: 10px;
          text-align: center;
          line-height: 30px;
          font-weight: bold;
          // display: flex;
          // align-items: center;
          border-radius: 10px;
        }

        .blue {
          background-color: #e6edff;
          color: #316be9;
        }

        .green {
          background-color: #e1f8f2;
          color: #1db386;
        }

        .cyan {
          background-color: #e4f0ff;
          color: #06a1e4;
        }
      }

      .excel {
        margin-top: 20px;
        font-size: 28px;
        color: #545454;
      }

      .like {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 25px;
        color: #707070;

        .color {
          color: #e05500;
          font-weight: bold;
          font-size: 30px;
        }

        .separate {
          margin: 0 10px;
          font-weight: 50;
          color: #e5e5e5;
        }
      }

      .ask {
        width: 100%;
        height: 80px;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price {
          font-size: 25px;
          color: #e05500;
          font-weight: bold;

          .num {
            font-size: 35px;
            color: #e05500;
          }
        }

        .btn {
          width: 160px;
          height: 60px;
          color: #fff;
          font-weight: bold;
          border: 0;
          background-color: #1e6fff;
          border-radius: 15px;
        }
      }
    }
  }
}
</style>
